<!--  -->
<template>
  <div class="student">
    <h1>学生名字： {{ name }}</h1>
    <h1>年龄： {{ age }}</h1>
    <h3>当前求和为：{{ number }}</h3>
    <button @click="addNumber">number ++</button>
    <button @click="getName">获取学生姓名</button>
    <button @click="unbind">解绑事件</button>
    <button @click="destory">解绑Student组件的实例</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "Tom",
      age: 18,
      number: 0,
    };
  },
  methods: {
    addNumber() {
      console.log("addNumber  被调用了");
      this.number++;
    },
    getName() {
      // 触发Student组件实例身上的getStudentName事件
      this.$emit("getStudentName", this.name);
      this.$emit("demo", this.name);
    },
    unbind() {
      // this.$off("getStudentName"); // 解绑getStudentName 事件
      // this.$off(["getStudentName", "demo"]); // 解绑getStudentName和demo 事件
      this.$off(); // 解绑所有事件
    },
    destory() {
      this.$destroy();
    },
  },
};
</script>

<style lang="css">
.student {
  background-color: pink;
  padding: 5px;
  margin-top: 10px;
}
</style>

